<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap Library CSS JS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    
    <style>
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            overflow-x: hidden;
            position: relative;
        }

        .bg-decoration {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
            overflow: hidden;
        }
        
        .bg-circle {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
        }
        
        .bg-circle-1 {
            width: 600px;
            height: 600px;
            background: linear-gradient(135deg, #ffffff 0%, #6dd5fa 100%);
            top: -300px;
            right: -150px;
            animation: float 15s ease-in-out infinite;
        }
        
        .bg-circle-2 {
            width: 400px;
            height: 400px;
            background: linear-gradient(135deg, #f8ff00 0%, #3ad59f 100%);
            bottom: -200px;
            left: -100px;
            animation: float 20s ease-in-out infinite;
        }
        
        .bg-circle-3 {
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            top: 30%;
            left: 10%;
            animation: float 12s ease-in-out infinite;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0px) rotate(0deg);
            }
            50% {
                transform: translateY(-20px) rotate(10deg);
            }
            100% {
                transform: translateY(0px) rotate(0deg);
            }
        }
        
        .card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: none;
            z-index: 1;
        }
        
        .btn-floating {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .btn-floating:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .btn-facebook {
            color: #3b5998;
        }
        
        .btn-google {
            color: #db4437;
        }
        
        .btn-twitter {
            color: #1da1f2;
        }
        
        .btn-github {
            color: #333;
        }
        
        #loginButton {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        #loginButton:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
        }
        
        #loginButton:active {
            transform: translateY(0);
        }
    </style>
</head>

<body>
    <!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>

    <!-- our own navbar goes here -->
    <nav id="navbarPlaceholder"></nav>

    <!-- the body of your page goes here -->
    <!-- stuff -->

    <div class="bg-decoration">
        <div class="bg-circle bg-circle-1"></div>
        <div class="bg-circle bg-circle-2"></div>
        <div class="bg-circle bg-circle-3"></div>
    </div>

    <section class="vh-100 d-flex flex-column justify-content-center align-items-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-8 col-lg-6 col-xl-5">
                    <div class="text-center mb-5">
                        <div class="d-inline-flex align-items-center justify-content-center w-16 h-16 rounded-full bg-warning mb-3 shadow-lg">
                            <i class="fa fa-cube text-primary text-3xl"></i>
                        </div>
                        <h1 class="text-2xl font-bold text-white text-shadow">BCIT Project</h1>
                        <p class="text-white/80 text-shadow">Sign in to continue</p>
                    </div>

                    <div class="card shadow-xl" style="border-radius: 1.5rem;">
                        <div class="card-body p-6">
                            <h3 class="mb-5 text-center text-gray-800 font-bold">Welcome Back</h3>
                            
                            <div id="loginAlert" class="alert d-none mb-4" role="alert"></div>

                            <div class="form-outline mb-4">
                                <div class="input-group">
                                    <span class="input-group-text bg-transparent border-right-0" id="basic-addon1">
                                        <i class="fa fa-phone text-primary"></i>
                                    </span>
                                    <input type="tel" id="phoneInput" class="form-control form-control-lg border-left-0" placeholder="Phone number" />
                                </div>
                                <div class="invalid-feedback">
                                    Please enter a valid phone number
                                </div>
                            </div>

                            <div class="form-outline mb-4">
                                <div class="input-group">
                                    <span class="input-group-text bg-transparent border-right-0" id="basic-addon2">
                                        <i class="fa fa-lock text-primary"></i>
                                    </span>
                                    <input type="password" id="passwordInput" class="form-control form-control-lg border-left-0" placeholder="Password" />
                                    <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                        <i class="fa fa-eye-slash"></i>
                                    </button>
                                </div>
                                <div class="invalid-feedback">
                                    Password must be at least 6 characters
                                </div>
                            </div>

                            <div class="form-check d-flex justify-content-between mb-5">
                                <div class="d-flex align-items-center">
                                    <input class="form-check-input me-2" type="checkbox" value="" id="rememberMe" />
                                    <label class="form-check-label" for="rememberMe">
                                        Remember me
                                    </label>
                                </div>
                                <a class="small text-primary" href="#!">Forgot password?</a>
                            </div>

                            <button id="loginButton" class="btn btn-warning btn-lg btn-block mb-4 text-white font-bold" type="button">
                                <i class="fa fa-sign-in me-2"></i>Sign in
                            </button>

                            <div class="text-center">
                                <p class="mb-3 text-muted">or sign in with:</p>
                                <div class="d-flex justify-content-center">
                                    <button type="button" class="btn btn-link btn-floating btn-facebook mx-2">
                                        <i class="fa fa-facebook"></i>
                                    </button>
                                    <button type="button" class="btn btn-link btn-floating btn-google mx-2">
                                        <i class="fa fa-google"></i>
                                    </button>
                                    <button type="button" class="btn btn-link btn-floating btn-twitter mx-2">
                                        <i class="fa fa-twitter"></i>
                                    </button>
                                    <button type="button" class="btn btn-link btn-floating btn-github mx-2">
                                        <i class="fa fa-github"></i>
                                    </button>
                                </div>
                            </div>

                            <hr class="my-4">

                            <div class="text-center">
                                <p class="mb-0">Don't have an account? <a href="#!" class="text-primary font-medium">Register here</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const phoneInput = document.getElementById('phoneInput');
            const passwordInput = document.getElementById('passwordInput');
            const loginButton = document.getElementById('loginButton');
            const loginAlert = document.getElementById('loginAlert');
            const togglePassword = document.getElementById('togglePassword');
            
            function validateForm() {
                let isValid = true;

                const phonePattern = /^1[3-9]\d{9}$/;
                if (!phonePattern.test(phoneInput.value.trim())) {
                    phoneInput.classList.add('is-invalid');
                    isValid = false;
                } else {
                    phoneInput.classList.remove('is-invalid');
                }
                
                // 验证密码
                if (passwordInput.value.length < 6) {
                    passwordInput.classList.add('is-invalid');
                    isValid = false;
                } else {
                    passwordInput.classList.remove('is-invalid');
                }
                
                return isValid;
            }
            
            function showAlert(message, type = 'danger') {
                loginAlert.textContent = message;
                loginAlert.className = `alert alert-${type} mb-4`;
                loginAlert.classList.remove('d-none');
                
                loginAlert.style.animation = 'fadeIn 0.5s ease-in-out';
                
                setTimeout(() => {
                    loginAlert.style.animation = 'fadeOut 0.5s ease-in-out';
                    setTimeout(() => {
                        loginAlert.classList.add('d-none');
                        loginAlert.style.animation = '';
                    }, 500);
                }, 3000);
            }
            
            loginButton.addEventListener('click', function() {
                if (!validateForm()) {
                    return;
                }
                
                loginButton.disabled = true;
                loginButton.innerHTML = '<i class="fa fa-spinner fa-spin me-2"></i>Signing in...';
                
                setTimeout(() => {
                    if (phoneInput.value === '13800138000' && passwordInput.value === '123456') {
                        showAlert('Login successful! Redirecting...', 'success');
                        
                        setTimeout(() => {
                            window.location.href = '/home';
                        }, 1000);
                    } else {
                        showAlert('Invalid phone number or password');
                        
                        loginButton.disabled = false;
                        loginButton.innerHTML = '<i class="fa fa-sign-in me-2"></i>Sign in';
                    }
                }, 1500);
            });
            
            togglePassword.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                

                const icon = togglePassword.querySelector('i');
                if (type === 'text') {
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                } else {
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                }
            });
            
            phoneInput.addEventListener('focus', function() {
                this.classList.remove('is-invalid');
            });
            
            passwordInput.addEventListener('focus', function() {
                this.classList.remove('is-invalid');
            });

            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    if (targetId !== '#') {
                        document.querySelector(targetId).scrollIntoView({
                            behavior: 'smooth'
                        });
                    }
                });
            });
            
            const style = document.createElement('style');
            style.textContent = `
                @keyframes fadeIn {
                    from { opacity: 0; transform: translateY(-10px); }
                    to { opacity: 1; transform: translateY(0); }
                }
                @keyframes fadeOut {
                    from { opacity: 1; transform: translateY(0); }
                    to { opacity: 0; transform: translateY(-10px); }
                }
            `;
            document.head.appendChild(style);
        });
    </script>

<!---------------------------------------------->
<nav id="footerPlaceholder"></nav>
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->
    <script src="./scripts/skeleton.js"></script>
    <!-- <script src="./scripts/script.js"></script> -->


</body>

</html>